<template>
  <section class="list">
    <div class="item" v-for="(item, key, index) in cities" :key="index" @click="onLetterClick" :ref="key"
    @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">{{key}}</div>
  </section>
</template>

<script>
export default {
  name: 'CityAlphabet',
  props: {
    cities: Object
  },
  data () {
    return {
      touchFlag: false
    }
  },
  computed: {
    letters () {
      let letters = []
      for (let item in this.cities) {
        letters.push(item)
      }
      return letters
    }
  },
  methods: {
    onLetterClick (e) {
      this.$bus.$emit('letterClick', e.target.innerText)
    },
    onTouchStart () {
      this.touchFlag = true
    },
    onTouchMove (e) {
      if (this.touchFlag === true) {
        const startY = this.$refs['A'][0].offsetTop
        const touchY = e.touches[0].clientY - 79
        let index = Math.floor((touchY - startY) / 20)
        index = index > this.letters.length ? this.letters.length : index
        this.$bus.$emit('letterClick', this.letters[index])
      }
    },
    onTouchEnd () {
      this.touchFlag = false
    }
  }
}
</script>

<style lang="less" scoped>
  @import '~styles/varibles.less';
  @import '~styles/mixins.less';
  .list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 1.58rem;
    right: 0;
    bottom: 0;
    width: .4rem;
    .item {
      line-height: .4rem;
      color: @bgColor;
    }
  }
</style>
